<template>
	<view style="height: 100%;">
		<view v-if="organizationInfo!==null" style="margin: 20rpx;">
			<view>
				<img :src="organizationInfo.organAvatar" alt="社团封面" style="width: 100%;height: 400rpx;">
			</view>
			<h3 style="text-align: center;">{{organizationInfo.organName}}</h3>
			<view style="margin-top: 20rpx;font-size: smaller;color: #808080;">
				{{organizationInfo.organIntroduction}}
			</view>

			<!-- 条件选择器 -->
			<uni-segmented-control style="margin-top: 20rpx;" :current="current" :values="items"
				@clickItem="onClickItem" styleType="text" />

			<!-- 公告 -->
			<view v-if="current==0">
				<view
					style="display: flex;justify-content: space-around;border-bottom: 1px solid #C0C0C0;padding-bottom: 12rpx;margin-top: 20rpx;margin-bottom: 20rpx;"
					v-for="(n,index1) in boardInfoList" :key="index1" @click="navigateTo(n.boaId)">
					<view style="width: 200rpx;height: 160rpx;"><img style="width: 200rpx;height: 160rpx;"
							:src="n.boaUserAvatar" alt="">
					</view>
					<view style="width: 65%;">
						<view style="height: 40rpx;overflow: hidden;">{{n.boaContent}}</view>
						<view style="font-size: smaller;color: #808080;margin-top: 10rpx;margin-bottom: 10rpx;">
							{{n.boaUserName}}
						</view>
						<view
							style="display: flex;justify-content: space-between;font-size: smaller;color: #808080;margin-top: 40rpx;">
							<view>{{n.boaViews}}阅读</view>
							<view>{{n.createAt}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 新闻 -->
			<view v-if="current==1"
				style="display: flex;justify-content: space-around;border-bottom: 1px solid #C0C0C0;padding-bottom: 12rpx;margin-top: 20rpx;margin-bottom: 20rpx;"
				v-for="(ne,index1) in newsInfoList" :key="index1" @click="navigateTo(ne.newId)">
				<view style="width: 200rpx;height: 160rpx;"><img style="width: 200rpx;height: 160rpx;"
						:src="ne.newAvatar" alt="">
				</view>
				<view style="width: 65%;">
					<view style="overflow: hidden;">{{ne.newTitle}}</view>
					<view style="font-size: smaller;color: #808080;margin-top: 10rpx;margin-bottom: 10rpx;">
						{{ne.newOrganizationName}}
					</view>
					<view
						style="display: flex;justify-content: space-between;font-size: smaller;color: #808080;margin-top: 40rpx;">
						<view>{{ne.newViews}}阅读</view>
						<view>{{ne.createAt}}</view>
					</view>
				</view>
			</view>

			<!-- 活动 -->
			<view v-if="current==2"
				style="display: flex;justify-content: space-around;border-bottom: 1px solid #C0C0C0;padding-bottom: 12rpx;margin-top: 20rpx;margin-bottom: 20rpx;"
				v-for="(act,index1) in activityInfoList" :key="index1" @click="navigateTo(act.actId)">
				<view style="width: 200rpx;height: 160rpx;"><img style="width: 200rpx;height: 160rpx;"
						:src="act.actAvatar" alt="">
				</view>
				<view style="width: 65%;">
					<view style="overflow: hidden;">{{act.actName}}</view>
					<view style="font-size: smaller;color: #808080;margin-top: 10rpx;margin-bottom: 10rpx;">
						{{act.actOrganizationName}}
					</view>
					<view
						style="display: flex;justify-content: space-between;font-size: smaller;color: #808080;margin-top: 40rpx;">
						<view>{{act.actViews}}阅读</view>
						<view>{{act.createAt}}</view>
					</view>
				</view>
			</view>

			<view v-if="organizationInfo.identity">
				<uni-fab horizontal="right" vertical="bottom" @fabClick="add"></uni-fab>
			</view>

			<!-- 右侧抽屉 -->
			<!-- 0:社员；1:财务；2:副社或团支书：3:社长 -->
			<view>
				<uni-drawer ref="showRight" mode="right">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<uni-list>
							<!-- 传递当前用户身份 -->
							<uni-list-item title="查看所有社员" :show-extra-icon="true"
								:extraIcon="{color: '#bfbfbf',size: '22',type: 'contact'}" clickable
								@click="toUserList" />
							<!-- 传递当前用户身份 -->
							<uni-list-item title=" 查看所有部门" :show-extra-icon="true"
								:extraIcon="{color: '#bfbfbf',size: '22',type: 'paperplane'}" clickable
								@click="toDepartList" />
							<uni-list-item v-if="organizationInfo.myJob==3 || organizationInfo.myJob==1" title="查看社团经费"
								:show-extra-icon="true" :extraIcon="{color: '#bfbfbf',size: '22',type: 'info'}"
								clickable @click="toFunds" />
							<uni-list-item v-if="organizationInfo.myJob==3 || organizationInfo.myJob==2" title="审批入社申请"
								:show-extra-icon="true" :extraIcon="{color: '#bfbfbf',size: '22',type: 'navigate'}"
								clickable @click="toApplication" />
							<uni-list-item v-if="organizationInfo.myJob==3" title="申请注销社团" :show-extra-icon="true"
								:extraIcon="{color: '#bfbfbf',size: '22',type: 'close'}" clickable @click="showApply" />
							<uni-list-item title="退出社团" :show-extra-icon="true"
								:extraIcon="{color: '#bfbfbf',size: '22',type: 'closeempty'}" @click="exitOrganization"
								clickable />
						</uni-list>
					</scroll-view>
				</uni-drawer>
			</view>
		</view>

		<uni-popup ref="cancel" type="dialog">
			<uni-popup-dialog title="注销理由" mode="input" @confirm="cancelOrganization"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分段器
				items: ['公告', '新闻', '活动'],
				current: 0,
				orgId: null,
				orgName: null,
				// 存储数据
				organizationInfo: null,
				boardInfoList: [],
				newsInfoList: [],
				activityInfoList: []
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.orgId = option.orgId;
			this.orgName = option.orgName;
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: option.orgName
			})
			// 获取社团详情
			this.getOrgDetail()
			// 默认进来获取公告列表
			this.getBoardList()
		},
		onShow() {
			// 获取社团详情
			this.getOrgDetail()
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: this.orgName
			})
			if (this.current == 0) {
				// 获取公告列表
				this.getBoardList();
			} else if (this.current == 1) {
				// 获取新闻列表
				this.getNewsList();
			} else if (this.current == 2) {
				// 获取活动列表
				this.getActivityList();
			}
		},
		onBackPress(e) {
			uni.navigateTo({
				url: './myOrganization'
			});
			// return true 表示禁止默认返回
			return true
		},
		// 右上角更多
		onNavigationBarButtonTap: function(e) {
			this.$refs.showRight.open();
		},
		methods: {
			// 跳转到入社申请
			toApplication(){
				uni.navigateTo({
					url: `./apply/application?orgId=${this.orgId}`
				})
			},
			// 跳转到社团经费
			toFunds(){
				uni.navigateTo({
					url: `./funds/orgFunds?orgId=${this.orgId}`
				})
			},
			// 跳转到用户列表
			toUserList() {
				uni.navigateTo({
					url: `./department/userList?orgId=${this.orgId}`
				})
			},
			// 跳转到部门列表
			toDepartList() {
				uni.navigateTo({
					url: `./department/departList?orgId=${this.orgId}&myJob=${this.organizationInfo.myJob}`
				})
			},
			// 申请注销社团
			cancelOrganization(done, value) {
				uni.showModal({
					content: `您确定要申请注销 [${this.orgName}] 吗?`,
					confirmText: '注销',
					confirmColor: 'red',
					success: res => {
						if (res.confirm) {
							// 发送请求
							this.$http.request({
								url: '/organizations/web/organization/cancel',
								method: 'POST',
								data: {
									id: this.orgId,
									reason: value
								}
							}).then(res => {
								res = res.data;
								if (res.result) {
									uni.showModal({
										content: res.msg,
										showCancel: false,
										success: res => {
											uni.navigateTo({
												url: './myOrganization'
											})
										}
									});
								} else {
									uni.showModal({
										content: res.msg,
										showCancel: false
									});
								}
							})
						}
					}
				});
			},
			// 显示弹出层
			showApply() {
				this.$refs.showRight.close();
				this.$refs.cancel.open();
			},
			// 退出社团
			exitOrganization() {
				uni.showModal({
					content: '您确定要退出社团吗?',
					confirmText: '退出',
					confirmColor: 'red',
					success: res => {
						if (res.confirm) {
							// 退出社团
							this.$http.request({
								url: `/organizations/web/organization/quit/${this.orgId}`,
								method: 'DELETE'
							}).then(res => {
								res = res.data;
								if (res.result) {
									uni.showModal({
										content: res.msg,
										showCancel: false,
										success: res => {
											uni.navigateTo({
												url: './myOrganization'
											})
										}
									});
								} else {
									uni.showModal({
										title: '无法退出社团',
										content: res.msg,
										showCancel: false
									});
								}
							})
						}
					}
				});
			},
			// 分段器
			onClickItem(index) {
				if (this.current !== index.currentIndex) {
					this.current = index.currentIndex;
				}
				if (this.current == 0) {
					// 获取公告列表
					this.getBoardList();
				} else if (this.current == 1) {
					// 获取新闻列表
					this.getNewsList();
				} else if (this.current == 2) {
					// 获取活动列表
					this.getActivityList();
				}
			},
			// 获取社团详情
			getOrgDetail() {
				this.$http.request({
					url: `/organizations/web/organization/orgDetail/${this.orgId}`
				}).then(res => {
					res = res.data;
					this.organizationInfo = res.data;
				})
			},
			// 获取社团公告列表
			getBoardList() {
				this.$http.request({
					url: `/organizations/web/boards/board/org/${this.orgId}`
				}).then(res => {
					res = res.data;
					this.boardInfoList = res.data;
				})
			},
			// 获取社团新闻列表
			getNewsList() {
				this.$http.request({
					url: `/organizations/web/news/list/${this.orgId}`
				}).then(res => {
					res = res.data;
					this.newsInfoList = res.data;
				})
			},
			// 获取社团活动列表
			getActivityList() {
				this.$http.request({
					url: `/organizations/web/activity/list/${this.orgId}`
				}).then(res => {
					res = res.data;
					this.activityInfoList = res.data;
				})
			},
			// 发布
			add() {
				// 根据 this.current来判断进入哪个发布界面
				if (this.current == 0) {
					uni.navigateTo({
						url: './addBoard?orgId=' + this.orgId + '&orgName=' + this.orgName
					})
				} else if (this.current == 1) {
					uni.navigateTo({
						url: './addNews?orgId=' + this.orgId + '&orgName=' + this.orgName
					})
				} else if (this.current == 2) {
					uni.navigateTo({
						url: './addActivity?orgId=' + this.orgId + '&orgName=' + this.orgName
					})
				}
			},
			// 查看详情
			navigateTo(id) {
				if (this.current == 0) {
					uni.navigateTo({
						url: './boardDetail?id=' + id
					})
				} else if (this.current == 1) {
					uni.navigateTo({
						url: './newsDetail?newId=' + id
					})
				} else if (this.current == 2) {
					uni.navigateTo({
						url: './activityDetail?actId=' + id
					})
				}
			}
		}
	}
</script>

<style>
</style>
